<!DOCTYPE html>
<html lang="en">
<head>
    <title>登陆</title>
    <meta charset="UTF-8"/>
    <!--vue-->
    <script src="/js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/css/index.css">
    <!-- 引入组件库 -->
    <script src="/js/index.js"></script>
    <!--axios-->
    <script src="/js/axios.min.js"></script>
    <link rel="stylesheet" href="static/login/bootstrap.min.css"/>
    <link rel="stylesheet" href="static/login/css/camera.css"/>
    <script
            type="text/javascript"
            src="static/login/js/jquery-1.5.1.min.js"
    ></script>
    <script src="static/js/jquery-1.7.2.js"></script>
    <script src="static/login/js/camera.min.js"></script>
    <script src="static/login/js/templatemo_script.js"></script>
    <script src="static/login/js/ban.js"></script>
    <script src="static/login/js/jquery.easing.1.3.js"></script>
    <script src="static/login/js/jquery.mobile.customized.min.js"></script>
    <style type="text/css">
        .cavs {
            z-index: 2;
            position: fixed;
            width: 95%;
            margin-left: 20px;
            margin-right: 20px;
        }
        .logoP {
            height: 60px;
            position: absolute;
            z-index: 1;
            top: 8%;
            left: 7%;
            width: 40px;
        }
        .logo {
            position: absolute;
            top: 10%;
            left: 10%;
            z-index: 1;
            color: #fff;
            font: normal 30px 'LianMengQiYiLuShuaiZhengRuiHeiTi' ;
        }
        .form {
            background-color: rgba(255, 255, 255, .3);
            width: 20%;
            height: 450px;
            position: absolute;
            z-index: 3;
            top: 160px;
            left: 37.5%;
            padding: 30px;
        }

        .logins {
            font: normal bolder 30px 'LianMengQiYiLuShuaiZhengRuiHeiTi';
            color: black;
            text-align: center;
            display: block;
            margin-top: 20px;
            margin-bottom: 20px;
        }


        @font-face {
            font-family: "LianMengQiYiLuShuaiZhengRuiHeiTi-2";
            src: url("../../css/LianMengQiYiLuShuaiZhengRuiHeiTi-2.ttf");
        }

        #login {
            text-decoration: none;
            position: relative;
            border: none;
            font-size: 14px;
            font-family: inherit;
            color: #fff;
            width: 100px;
            height: 50px;
            line-height: 2em;
            text-align: center;
            background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
            background-size: 300%;
            border-radius: 30px;
            z-index: 1;
            margin: 40px auto;
        }

        #login:hover {
            animation: ani 8s linear infinite;
            border: none;
        }

        @keyframes ani {
            0% {
                background-position: 0%;
            }

            100% {
                background-position: 400%;
            }
        }

        #login:hover::before {
            filter: blur(20px);
        }

        #login:active {
            background: linear-gradient(32deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
        }

        .learn-more {
            position: relative;
            display: inline-block;
            cursor: pointer;
            outline: none;
            border: 0;
            vertical-align: middle;
            text-decoration: none;
            background: transparent;
            padding: 0;
            font-size: inherit;
            font-family: inherit;
        }

        button.learn-more {
            width: 12rem;
            height: auto;
        }

        button.learn-more .circle {
            transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
            position: relative;
            display: block;
            margin: 0;
            width: 3rem;
            height: 3rem;
            background: #282936;
            border-radius: 1.625rem;
        }

        button.learn-more .circle .icon {
            transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
            background: #fff;
        }

        button.learn-more .circle .icon.arrow {
            transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
            left: 0.625rem;
            width: 1.125rem;
            height: 0.125rem;
            background: none;
        }

        button.learn-more .circle .icon.arrow::before {
            position: absolute;
            content: "";
            top: -0.29rem;
            right: 0.0625rem;
            width: 0.625rem;
            height: 0.625rem;
            border-top: 0.125rem solid #fff;
            border-right: 0.125rem solid #fff;
            transform: rotate(45deg);
        }

        button.learn-more .button-text {
            transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 0.75rem 0;
            margin: 0 0 0 1.85rem;
            color: #282936;
            font-weight: 700;
            line-height: 1.6;
            text-align: center;
            text-transform: uppercase;
        }

        .learn-more:hover .circle {
            width: 100%;
        }

        .learn-more:hover .circle .icon.arrow {
            background: #fff;
            transform: translate(1rem, 0);
        }

        .learn-more:hover .button-text {
            color: #fff;
        }

        #mobile, #password1, #password2, #nameA, #smallname, #sex {
            width: 100%;
            height: 25px;
            margin-top: 5px;
        }

        /*#sex{*/
        /*    width: 105%;*/
        /*    height: 34px;*/
        /*    margin-top: 5px;*/
        /*}*/
        #numcode {
            width: 62%;
            height: 25px;
            margin-top: 5px;
        }

        #fetchCode {
            height: 35px;
            width: 30%;
            margin-top: 5px;
            margin-left: 5px;
            position: absolute;
            float: right;
            border-radius: 5px;
            border: 0;
        }
    </style>
</head>
<body>
<img class="logoP" src="static/login/images/logo.png" alt="">
<div class="logo">趣哪儿</div>
<div class="form">
<!--    <template>-->
<!--        <el-button :plain="false" @click="open1">成功</el-button>-->
<!--        <el-button :plain="false" @click="open2">错误</el-button>-->
<!--    </template>-->
    <form id="modifyPassword" class="form-horizontal">
        <span class="logins">注册</span>
        <input v-model="mobile" type="text" id="mobile" name="mobile" @blur="checkNum()"
               placeholder="手机">
        <input v-model="number" type="text" id="numcode" name="numcode"
               placeholder="验证码"
               value="">
        <!--        <input type="button" id="fetchCode" class="btn1" @click="fetchCode"  value="获取短信验证码" >-->
        <button type="button" id="fetchCode" :class="{ codeGeting:isGeting }" @click="fetchCode">{{getCode}}</button>
        <input v-model="password1" type="password" id="password1" name="password"
               placeholder="密码"
               value="">
        <input v-model="password2" type="password" id="password2" name="password"
               placeholder="确认密码"
               value="">
        <input v-model="nameA" type="text" id="nameA" name="nameA"
               placeholder="姓名"
               value="">
        <input v-model="smallname" type="text" id="smallname" name="smallname"
               placeholder="昵称">
        <input v-model="sex" type="text" id="sex" name="sex"
               placeholder="性别"
               value="">
        <button type="button" id="login" @click="login">注册</button>
        <button class="learn-more">
              <span class="circle" aria-hidden="true">
                <span class="icon arrow"></span>
              </span>
            <span class="button-text"><a href="/html/front/t-login.html" target="_blank">返回登录</a></span>
        </button>
    </form>
</div>
<canvas class="cavs"></canvas>
<div id="templatemo_banner_slide" class="container_wapper">
    <div class="camera_wrap camera_emboss" id="camera_slide">
                <div data-src="static/login/images/banner_slide_01.jpg"></div>
                <div data-src="static/login/images/banner_slide_02.jpg"></div>
                <div data-src="static/login/images/banner_slide_03.jpg"></div>
                <div data-src="static/login/images/banner_slide_04.jpg"></div>
                <div data-src="static/login/images/banner_slide_05.jpg"></div>
    </div>
</div>
<script>
    var vue = new Vue({
        el: ".form",
        data() {
            return {
                mobile: '',
                password1: '',
                password2: '',
                nameA: '',
                smallname: '',
                sex: '',
                getCode: '获取验证码',
                isGeting: false,
                count: 60,
                disable: false,
                numcode: '',
            }

        },
        methods: {
            checkNum(){
                let _this=this;
                //失去焦点判断手机号是否存在
                if (!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(this.mobile)) {
                    _this.open3();
                }else {
                    axios.post('/tuser/mobile?mobile=' + this.mobile)
                        .then(function (response) {
                            if (response.data.code == 200) {
                                _this.open1()
                            } else {
                                _this.open2()
                            }
                        })
                        .catch(function (error) {

                        });
                }
            },
            goDL() {
                location.href = "/html/front/t-login.html";
                window.close();
            },
            login() {
                _this = this;
                console.log("注册。。。。。。。。。。。。");
                if (this.mobile == '' || this.password1 == '' ||
                    this.password2 == '' || this.nameA == '' ||
                    this.smallname == '' || this.sex == '') {
                    _this.$message.error("都不能为空！");
                    return;
                } else if (this.password1 != this.password2) {
                    _this.$message.error("两次密码需保持一致！");
                    return;
                }
                //用户注册
                axios.post('/tuser/yanzheng?numcode=', +this.numcode)
                    .then(function (response) {
                        console.log(response);
                        _this.addAAA();
                    })
                    .catch(function (error) {
                        console.log(error);
                        _this.$message.error("验证码错误。。。");
                    });
            },
            addAAA() {
                axios.post('/tuser/add?mobile=' + this.mobile +
                    "&password=" + this.password2 + "&name=" + this.nameA + "&smallname=" + this.smallname + "&sex=" + this.sex
                ).then(function (response) {
                    if (response.data.code == 200) {
                        location.href = "/html/front/t-login.html";
                    } else {
                        _this.$message.error("用户名或者密码错误");
                    }
                }).catch(function (error) {
                    console.log(error);
                    _this.$message.error("你错了。。。");
                });
            },
            fetchCode() {
                var countDown = setInterval(() => {
                    if (this.count < 1) {
                        this.isGeting = false;
                        this.disable = false;
                        this.getCode = '获取验证码';
                        this.count = 6;
                        clearInterval(countDown);
                    } else {
                        this.isGeting = true;
                        this.disable = true;
                        this.getCode = this.count-- + 's后重发';
                    }
                }, 1000);
                _this = this
                if (this.mobile == '') {
                    _this.$message("请输入手机号");
                    return;
                }
                axios.post('/tuser/createCode?mobile=' + this.mobile).then(function (response) {
                    if (response.data.code == 200) {
                        // alert("验证码生成成功")
                        this.$message({
                            type: 'success',
                            message: '验证码已发送!'
                        });
                    }
                }).catch(function (error) {
                    this.$message.error("未生成");
                });
            },
            open1() {
                this.$message({
                    message: '恭喜你，这是该手机号可以使用请获取验证码',
                    type: 'success'
                });
            },
            open2() {
                this.$message.error('手机号已存在');
            },
            open3() {
                this.$message.error('请填写正确手机号');
            }
        }
    });
</script>
</body>
</html>